import React, { PureComponent } from 'react';
import { connect } from 'dva';

import { Row, Col, Icon, Form, Button, Avatar, Select, InputNumber, Popconfirm, Modal, AutoComplete, Input, Divider } from 'antd';

import styles from './styles.less';

const FormItem = Form.Item;
const Option = Select.Option;

const ModelName = "box";
@connect(({ loading, invItemCategory, currency }) => ({
  loading: loading.models[ModelName],
  cates: invItemCategory.list,
  curs: currency.list,
}))
@Form.create()
class Comp extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      catt: [],
    }

    const { getInstance } = props;
    if (typeof getInstance === 'function') {
      getInstance(this);
    }
  }

  componentDidMount() {
    const { inv } = this.props;
    this.reloadData(inv);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.inv != this.props.inv) {
      this.reloadData(nextProps.inv)
    }
  }

  reloadData(inv) {
    if (inv) {
      const { cates } = this.props;
      var catList = cates.filter(c => String(c.itemType).indexOf(String(inv.invoiceType)) >= 0);
      console.log("CAT LIST", inv);
      this.setState({
        catt: catList,
      });
    }
  }

  remove = (cateItem) => {
    // console.log("REMOVE AT", index);
    const { catt } = this.state;
    this.setState({
      // catt: catt.filter((_, i) => i !== index)
      catt: catt.filter((item) => item.id !== cateItem.id),
    })
  }

  addItem = () => {
    const { catt } = this.state;
    this.setState({
      catt: [
        ...catt,
        {}
      ]
    })
  }


  render() {
    const { form: { getFieldDecorator }, curs, inv, cates } = this.props;
    const { catt } = this.state;
    const { visible, onCancel } = this.props;

    const getModalContent = () => {
      const formLayout = {
        labelCol: {
          xs: { span: 0 },
          sm: { span: 0 },
          lg: { span: 0 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
          lg: { span: 24 },
        },
      };
      ;

      const formItems = () => {

        return catt.map((cate, index) => {
          return <Row gutter={24} key={index} className={styles.dataRow}>
            <Col span={6} >
              <FormItem {...formLayout}>
                {getFieldDecorator(`invItemCategoryId_${index}`, {
                  // rules: [{ required: true, message: '请输入类型' }],
                  initialValue: cate.id,
                })(
                  <Select style={{ width: '100%' }}>
                    {cates.map(p => <Option value={p.id} key={p.id}>{p.objectName}</Option>)}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={6} >
              <FormItem {...formLayout}>
                {getFieldDecorator(`price_${index}`, {
                  // rules: [{ required: true, message: '请输入单价' }],
                })(
                  <InputNumber style={{ width: '100%' }} />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem{...formLayout} hasFeedback={false} >
                {getFieldDecorator(`qty_${index}`, {
                  // rules: [{ required: true, message: '请输入数量' }],
                  initialValue: 1
                }
                )(<InputNumber style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={6} >
              <div style={{ display: 'flex', flexDirection: 'row' }} >
                <FormItem {...formLayout}>
                  {getFieldDecorator(`currencyId_${index}`, {
                    // rules: [{ required: true, message: '请输入币种' }],
                    initialValue: inv.invoiceType === 2 ? 1 : 2,
                  })(
                    <Select style={{ width: '120px' }}>
                      {curs.map(p => <Option value={p.id} key={p.id}>{p.objectName}</Option>)}
                    </Select>
                  )}
                </FormItem>
                {/* <Icon
                  className={styles.dynamic_delete_button}
                  type="minus-circle-o"
                  disabled={catt.length === 1}
                  onClick={() => this.remove(cate)}
                /> */}
              </div>
            </Col>
          </Row>;
        });
      }

      return (
        <Modal
          title={'添加账单'}
          destroyOnClose
          visible={visible}
          width={900}
          onOk={this.props.onOk}
          onCancel={onCancel}
        >
          <Row gutter={24} className={styles.titleRow}>
            <Col span={6}>费用类型</Col>
            <Col span={6}>单价</Col>
            <Col span={6}>数量</Col>
            <Col span={6}>币种</Col>
          </Row>
          <Form onSubmit={this.handleSubmit}>
            {formItems()}
          </Form >
          <Button
            type="dashed"
            icon="plus"
            style={{ marginTop: '16px' }}
            onClick={e => {
              e.preventDefault();
              this.addItem();
            }}
          >添加</Button>
        </Modal>
      );
    };

    return getModalContent();
  }
}

export default Comp;

